/*
 Less是 CSS 扩展语言，它在CSS的语法基础上，引入变量，Mixin(混入)，运算以及函数等功能
Less变量
    @变量名:值
变量命名规范：必须有 @ 为前缀，不能包含特殊字符，不能以数字开头，大小写敏感

*/

// 定义一个粉色的变量
// @color: pink;
// 使用变量
// body{
//     background-color: @color;
// }
// .demo1{
//     color: @color;
// }

// less嵌套
// 子元素的样式直接写到父元素里面就好了
.header{
    width: 200px;
    height: 200px;
    background-color: purple;
    a{
        color: aqua;
        // 若有伪类、交集、伪元素选择器，我们内层选择器的前面需要加 & 这个符号
        &:hover{
            color: green;
        }
    }
}
.nav{
    .logo{
        color: red;
    }
    &::before{
        display:inline-block;
        content: "";
        background-color: aquamarine;
        width: 20px;
        height: 20px;
    }
}

// less运算
/*
任何数字、颜色或者是变量都可以参与 加(+) 减(-) 乘(*) 除(/) 运算
运算符的左右两侧必须有一个空格隔开
两个数参与运算，若只有一个数有单位，则最后结果就以这个单位为准
两个数参与运算，若两个数都有单位，且单位不一样，则最后结果就以第一个单位为准
除法运算时要加小括号，否则无法运算
*/

@border: 5px + 5;
.demo2{
    width: 200px - 50;
    height: (200px / 2);
    border: @border solid red;
    background-color: #666 - #222;
}
